<script>
export default {
    name:'Icon',
    props:{
        name:String,
        style:Object,
    },
    setup(ctx){
        const iconName = `#${ctx.name}`
        return {
            iconName
        }
    }

}
</script>

<template>
    <div class="icon-wrapper" :style="{...style}">
        <svg class="icon">
            <use :href="iconName" ></use>
        </svg>
    </div>


</template>

<style scoped lang="scss">

</style>
<style scoped>
.icon-wrapper{
    display: inline-block;
}
.icon {
    width: 100%; height: 100%;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
</style>
